<template>
  <div class="nav-menu-index-wrapper">
    <div class="sidebar-wrapper">
      <nav-menu-left :menus="navMenus" :activeMenu="activeMenu" @on-select-menu="selectMenu"></nav-menu-left>
    </div>
    <div class="content-wrapper">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import NavMenuLeft from "../../../layout/partial/sidebar/NavMenuLeft";
export default {
  name: 'NavMenuIndex',
  components:{NavMenuLeft},
  watch: {
    $route(to) {
      this.initPage(to.path);
    }
  },
  data() {
    return {
      activeMenu: '',
      navMenus: [],
    }
  },
  mounted() {
    let path = this.$route.path;
    this.initPage(path);
  },
  methods: {
    initPage(path) {
      let paths = path.split('/').slice(1);
      this.activeMenu = paths[paths.length - 1];
      if (this.navMenus.length !== 0) {return;}
      if (sessionStorage.getItem("submenus") == null || sessionStorage.getItem("submenus") == undefined) {
        //如果没有左侧菜单做其他处理
        return;
      }
      this.navMenus = JSON.parse(sessionStorage.getItem("submenus"));
    },
    selectMenu(id) {
      this.activeMenu = id;
      this.recursionMenu(this.navMenus,id);
    },
    recursionMenu(menu,id){
      menu.forEach((d) => {
        if(d.children && d.children.length !== 0){
          this.recursionMenu(d.children,id);
        }else{
          d.icon === id ? (d.active = true, this.$router.push({
            path: d.path
          })) : (d.active = false);
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../../assets/styles/base_style';
.nav-menu-index-wrapper{
  height: 100%;
  .sidebar-wrapper {
    float: left;
    width: $sidebarWidth;
    height: 100%;
    background: url('../../../assets/images/sidebar/sidebar_bg.png') no-repeat center center;
    background-size: 100% 100%;
  }
  .content-wrapper {
    float: left;
    width: calc(100% - #{$sidebarWidth} - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    padding: 10px 20px;
    overflow: auto;
    background: #fff;
    @include scrollbarStyle(10px, 4px);
  }
}
</style>
